<template>
  <div id="LoadMore">
    <div class="LoadMore-top">
      <van-icon name="gift-card" size="30" color="#6e859b" />
      <p>- {{ LoadMore.name }} -</p>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :offset="60"
    >
      <div class="LoadMore-item" v-for="item in list" :key="item.index">
        <!-- 标题 -->
        <div v-if="item.name" class="LoadMore-item-title">
          {{ item.name }}
        </div>
        <!-- 图片和内容部分 -->
        <div
          class="LoadMore-item-content"
          @click="GoSingleSetView(item.data[0])"
        >
          <img :src="item.data[0].image" alt="" />
          <div>
            <p>{{ item.data[0].title }}</p>
            <p>{{ item.data[0].subtitle }}</p>
          </div>
        </div>
        <!-- 最下面蓝色小标签 -->
        <div
          v-if="item.data[0].summary"
          class="van-multi-ellipsis--l2 LoadMore-item-bot"
        >
          {{ item.data[0]?.summary }}
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { loadMore } from "@/api/request";
export default {
  name: "LoadMore",
  props: ["LoadMore"],
  data() {
    return {
      list: [],
      listPage: 1,
      loading: false,
      finished: false,
    };
  },
  // mounted() {
  //   this.$refs.listCheck.check();
  // },
  methods: {
    // 懒加载
    //https://api.vistopia.com.cn/api/v1/home/itemlist?page=1
    async PushList() {
      // 加了个定时器为了让加载中有时间显示
      await setTimeout(() => {
        loadMore({ page: this.listPage }).then(({ data }) => {
          data = data.data.data;
          // 输出查看请求的数据
          // console.log(data);
          data.map((item) => {
            return this.list.push(item);
          });

          this.loading = false;

          // 数组长度到了40就不继续加载啦
          if (this.list.length >= 40) {
            this.finished = true;
          }
        });
      }, 1000);
    },
    onLoad() {
      this.PushList();
      this.listPage++;
    },

    // 跳转节目的事件
    GoSingleSetView(item) {
      console.log(item);
      this.$router.push({
        path: "/SingleSetView",
        query: {
          article_id: item.article_id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#LoadMore {
  margin-bottom: 3.5rem;
  .LoadMore-top {
    margin: 1.875rem 0;
    text-align: center;
    p {
      color: #335272;
    }
  }
  .van-list {
    // vant List
    // 组件设置固定高度 下拉到一定高度 逐渐加载的功能才有效果
    min-height: 667px;
    .LoadMore-item {
      margin-top: 1.25rem;
      background-color: white;
      box-shadow: var(--boxsizi);
      .LoadMore-item-title {
        font-size: 0.875rem;
        color: var(--fontcolor);
        padding: 0.625rem;
        box-sizing: border-box;
      }
      .LoadMore-item-content {
        display: flex;
        align-items: center;
        padding: 0.625rem;
        box-sizing: border-box;
        img {
          width: 5rem;
          height: 5rem;
        }
        div {
          margin-left: 0.625rem;

          p:nth-child(1) {
            font-size: 0.875rem;
            line-height: 1.125rem;
          }
          p:nth-child(2) {
            font-size: 0.75rem;
            margin-top: 0.625rem;
            color: var(--fontcolor);
          }
        }
      }
      .LoadMore-item-bot {
        max-height: 2.8125rem;
        line-height: 1rem;
        font-size: 0.8125rem;
        background-color: #f1f5f9;
        padding: 0.625rem 0.625rem 0.75rem;
        box-sizing: border-box;
      }
    }
  }
}
</style>